<template>
    <!-- 首页文章列表区域，对不同浏览器宽度做适配 -->
    <div class="postlist"
        :class="{ grid: listview === 'grid', list: listview === 'list', hasaside: frontmatter.aside, hassidebar: frontmatter.sidebar || theme?.sidebar?.length }">
        <template v-for="(article, index) in posts" :key="index">
            <div class="list" v-if="theme.website?.showUserCard &&Number(theme.website?.cardPosition)-2 < 0 && index ===0 && listview === 'grid'">
                <ClientOnly>
                    <PageASide />
                </ClientOnly>
            </div>
            <div class="list">
                <ClientOnly>
                    <ArticleList :article="article" />
                </ClientOnly>
            </div>
            <div class="list" v-if="theme.website?.showUserCard &&index == Number(theme.website?.cardPosition)-2 && listview === 'grid'">
                <ClientOnly>
                    <PageASide />
                </ClientOnly>
            </div>
        </template>
        <div class="list" v-if="theme.website?.showUserCard &&posts.length < Number(theme.website?.cardPosition)-1 && listview === 'grid'">
            <ClientOnly>
                <PageASide />
            </ClientOnly>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { useData, withBase } from 'vitepress'
import { useStorage } from '@vueuse/core'
const { theme, frontmatter } = useData();
const listview = useStorage('listview', 'grid')
const props = defineProps({
    posts: Array
})
</script>

<style scoped>
.postlist {
    border-bottom: 1px dashed var(--vp-c-divider-light);
    padding: 14px 0 14px 0;
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0.1rem 0;
}

.post-info {
    font-size: 12px;
}

.post-info span {
    display: inline-block;
    padding: 0 8px;
    background-color: var(--vp-c-bg-alt);
    margin-right: 10px;
    transition: 0.4s;
    border-radius: 2px;
    color: var(--vp-c-text-1);
}

.describe {
    font-size: 0.9375rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--vp-c-text-2);
    margin: 10px 0;
    line-height: 1.5rem;
}

.pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.link {
    display: inline-block;
    width: 24px;
    text-align: center;
    border: 1px var(--vp-c-divider-light) solid;
    border-right: none;
    font-weight: 400;
}

.link.active {
    background: var(--vp-c-text-1);
    color: var(--vp-c-neutral-inverse);
    border: 1px solid var(--vp-c-text-1) !important;
}

.link:first-child {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}

.link:last-child {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    border-right: 1px var(--vp-c-divider-light) solid;
}

@media screen and (max-width: 768px) {
    .postlist {
        padding: 14px 0 14px 0;
    }

    .post-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .post-title {
        font-size: 1.0625rem;
        font-weight: 400;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 17rem;
    }

    .describe {
        font-size: 0.9375rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 0.5rem 0 1rem;
    }
}</style>